Breadcrumb Navigation
A 'breadcrumb' is a type of secondary navigation revealing the user's current location and granted access to parent levels of the site.
You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping.
Example
Code
<nav aria-label="Breadcrumb">
<ol itemscope="itemscope" itemtype="https://schema.org/BreadcrumbList" class="breadcrumb">
<li itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem">
<a itemprop="item" href="../../"><span itemprop="name">Knowledgebase</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem">
<a itemprop="item" href="../"><span itemprop="name">Pattern Library</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem">
<a itemprop="item" href="./" aria-current="page"><span itemprop="name">Molecules</span></a>
<meta itemprop="position" content="3" />
</li>
<li itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem">
<a itemprop="item" href="./breadcrumb.html" aria-current="page"><span itemprop="name">Breadcrumb</span></a>
<meta itemprop="position" content="4" />
</li>
</ol>
</nav>
.breadcrumb {
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb li {
display: inline;
}
.breadcrumb li+li:before {
padding: 0.66em;
color: black;
content: "/\00a0";
}
.breadcrumb li a {
text-decoration: none;
}
.breadcrumb li a:hover {
text-decoration: underline;
}
ARIA
<nav aria-label="Breadcrumb">
<ol>
<li>
<a href="../../">WAI-ARIA Authoring Practices</a>
</li>
<li>
<a href="/WAI/ARIA/apg/patterns/">Design Patterns</a>
</li>
<li>
<a href="/WAI/ARIA/apg/patterns/breadcrumb/">Breadcrumb Pattern</a>
</li>
<li>
<a href="index.html" aria-current="page">Breadcrumb Example</a>
</li>
</ol>
</nav>
Microdata
<nav>
<ol itemscope="itemscope" itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem">
<a itemprop="item" href="../../">
<span itemprop="name">WAI-ARIA Authoring Practices</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/WAI/ARIA/apg/patterns/">
<span itemprop="name">Design Patterns</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/WAI/ARIA/apg/patterns/breadcrumb/">
<span itemprop="name">Breadcrumb Pattern</span>
</a>
<meta itemprop="position" content="3" />
</li>
<li itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem">
<a itemprop="item" href="index.html">
<span itemprop="name">Breadcrumb Example</span>
</a>
<meta itemprop="position" content="4" />
</li>
</ol>
</nav>
External Links
- ARIA Authoring Practices Guide (APG): Breadcrumb
- ARIA Authoring Practices Guide (APG): Breadcrumb Example
- Google Search Central: Breadcrumb (BreadcrumbList) structured data
- Schema.org: BreadcrumbList
- Smashing Magazine: Breadcrumbs In Web Design: Examples And Best Practices
- Smashing Magazine: Designing A Perfect Breadcrumbs UX
- A11Y Style Guide: Navigation
- WebFX: Guide to Website Navigation Design Patterns
- GOV.UK Design System: Breadcrumbs
To Do
- Add JSON Sample Output